import React,{Component} from "react"
import $ from "jquery"
export default class Answer extends Component{
	constructor(props){
		super(props)
		this.state={
			
		}
	}
	answer(event){
		let el=$(this.form)
		let off=$(el).attr("style")
		$(".jour-all").find("form").hide(200)
		if(off){
			let input=$(el).find("input")
			$(el).slideDown(200)
			input.get(0).placeholder="回复"+this.props.commentusername+" :"
			input.focus()
		}
	}
	label(){
		var input=$(this.form).find("input")
		var val=input.val()
		input.val(" ")
		$(this.form).slideUp(100)
		this.props.submitAnswer(val,this.props.commentusername)
	}
	//点击人名进行跳转到这个人的路由下
	otheruser1(){
		let username=this.props.answer.anserUserName
		window.location="/user/"+username
	}

	//点击人名进行跳转到这个人的路由下
	otheruser2(){
		let username=this.props.commentusername
		window.location="/user/"+username
	}
	render(){
		return (
			<div key={this.props.answer.anserUserName}>
				<p><span style={{color:"blue",cursor:"pointer"}} onClick={(e)=>this.otheruser1(e)}>{this.props.answer.anserUserName}</span>回复<span onClick={(e)=>this.otheruser2(e)} style={{color:"blue",cursor:"pointer"}}>{this.props.commentusername}</span>: <span style={{cursor:"pointer"}} onClick={this.answer.bind(this)}>{this.props.answer.anserContent}</span></p>
				<form 
					ref={(form)=>this.form=form}
					className="form-horizontal"
					style={{display:"none"}}
				>
					<div className="form-group">
						<div className="col-lg-10 col-md-10 col-sm-8 col-xs-8">
							<input type="text" className="form-control"/>
						</div>
						<label 
							style={{textAlign:"left",fontSize:"larger",color:"white",cursor:"pointer"}} 
							className="col-lg-2 col-md-2 col-sm-4 col-xs-4 control-label"
							onClick={this.label.bind(this)}
						>发送</label>
					</div>
				</form>
			</div>
			
		)
	}
}